<template>
    <el-dialog :title="'接口列表'" :close-on-click-modal="false" :visible.sync="visible">
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50" :selectable="checkSelectable" />
            <el-table-column prop="apiName" header-align="center" align="center" label="接口名称" />
            <el-table-column prop="apiUrl" header-align="center" align="center" label="接口url" />
            <el-table-column prop="createDate" header-align="center" align="center" label="创建时间" />
            <el-table-column prop="updateDate" header-align="center" align="center" label="更新时间" />
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            id: null,
            visible: false,
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
        }
    },
    methods: {
        init(id) {
            this.id = id || 0
            this.visible = true
            this.getApiList();
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getApiList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getApiList()
        },
        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val
        },
        // 表单提交
        dataFormSubmit() {
            //判断当前是否有已经选中的接口，如果有就执行
            if (this.dataListSelections.length == 0) {
                this.visible = false
                this.$emit('refreshApiList')
                return;
            }

            this.$http({
                url: '/pms/admin/permission/addPermissionApi',
                method: 'post',
                data:{
                    permissionId: this.id,
                    apiIds: this.dataListSelections.map(item => (item.id))
                }
            }).then((response) => {
                if (response.code != "0") {
                    this.$message.error(response.respMessage)
                    return;
                }
                this.$message({ message: "添加成功", type: "success" });
                this.visible = false
                this.$emit('refreshApiList')
            })
        },
        // 查询接口列表
        getApiList() {
            this.$http({
                url: `/pms/admin/api/listApiInfoWithPermitStatus`,
                method: 'post',
                data: {
                    permissionId: this.id,
                    pageInfo: {
                        pageNum: this.pageIndex,
                        pageSize: this.pageSize
                    }
                }
            }).then((response) => {
                if (response && response.code == "0") {
                    this.dataList = response.data;
                    this.totalPage = response.total;
                } else {
                    this.$message.error(response.message)
                }
            })
        },
        // 判断当前行数据是否可以选中
        checkSelectable(row){
            return !row.checkedFlag || false;
        }
    }
}
</script>
